<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据写入 - 源智库 SpringBase</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #0d6efd;
            --secondary-color: #6c757d;
            --bg-color: #f4f7fa;
            --sidebar-bg: #ffffff;
            --header-bg: #ffffff;
            --card-bg: #ffffff;
            --text-color: #212529;
            --text-muted-color: #6c757d;
            --border-color: #dee2e6;
        }

        body {
            background-color: var(--bg-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-size: 14px;
            color: var(--text-color);
        }

        .wrapper {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 260px;
            background-color: var(--sidebar-bg);
            border-right: 1px solid var(--border-color);
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 100;
        }
        
        .sidebar-header {
            padding: 1.5rem 1.5rem;
            display: flex;
            align-items: center;
        }
        
        .sidebar-header .logo-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 0.75rem;
            line-height: 1;
        }
        
        .sidebar-header .logo-text {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .sidebar-nav {
            padding: 0 1rem;
        }

        .nav-item {
            margin-bottom: 0.5rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            color: var(--text-muted-color);
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .nav-link:hover {
            background-color: var(--bg-color);
            color: var(--primary-color);
        }

        .nav-link.active {
            background-color: var(--primary-color);
            color: #fff;
        }
        
        .nav-link i {
            margin-right: 1rem;
            font-size: 1.1rem;
        }

        .main-content {
            margin-left: 260px;
            width: calc(100% - 260px);
            display: flex;
            flex-direction: column;
        }

        .header {
            background-color: var(--header-bg);
            padding: 1rem 2rem;
            border-bottom: 1px solid var(--border-color);
        }

        .content {
            padding: 2rem;
            flex-grow: 1;
        }

        .card {
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
        }

        .upload-zone {
            border: 2px dashed var(--border-color);
            border-radius: 0.75rem;
            padding: 4rem;
            text-align: center;
            background-color: #ffffff;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .upload-zone:hover, .upload-zone.dragover {
            background-color: #f8f9fa;
            border-color: var(--primary-color);
        }

        .table-custom {
            font-size: 13px;
        }
        
        .table-custom th {
            font-weight: 600;
            color: var(--text-muted-color);
            background-color: var(--bg-color);
        }
        
        .table-custom td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- Sidebar -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <i class="bi bi-droplet-half logo-icon"></i>
                <a class="logo-text text-decoration-none" href="/platform">源智库 SpringBase</a>
            </div>
            
            <ul class="nav flex-column sidebar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/platform">
                        <i class="bi bi-grid-1x2-fill"></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/data-input">
                        <i class="bi bi-database-fill-add"></i>
                        <span>数据写入</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/knowledge-base">
                        <i class="bi bi-book-fill"></i>
                        <span>知识库</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/applications">
                        <i class="bi bi-app-indicator"></i>
                        <span>智能应用</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Main Content -->
        <div class="main-content">
            <header class="header">
                 <h2 class="mb-0 fw-bold">数据写入</h2>
            </header>

            <main class="content">
                <div class="row g-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab">文件上传</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="datasource-tab" data-bs-toggle="tab" data-bs-target="#datasource" type="button" role="tab">数据源连接</button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active p-4" id="upload" role="tabpanel">
                                        <div class="upload-zone" id="uploadZone">
                                            <input type="file" id="fileInput" multiple hidden>
                                            <i class="bi bi-cloud-arrow-up-fill display-3 text-primary"></i>
                                            <h4 class="mt-3">拖拽文件到此处或点击上传</h4>
                                            <p class="text-muted">支持 PDF, DOCX, TXT, CSV, JSON 等多种格式</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade p-4" id="datasource" role="tabpanel">
                                        <p>在此处配置数据库、API等实时数据源连接。</p>
                                        <button class="btn btn-primary">
                                            <i class="bi bi-plus-circle me-1"></i> 新建数据源
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">上传队列</h5>
                            </div>
                            <div class="card-body" id="fileListContainer">
                                <div class="text-center text-muted p-4">
                                    <p>暂无上传任务</p>
                                </div>
                                <!-- Uploaded files will be listed here -->
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const uploadZone = document.getElementById('uploadZone');
        const fileInput = document.getElementById('fileInput');
        const fileListContainer = document.getElementById('fileListContainer');

        uploadZone.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', (e) => handleFiles(e.target.files));

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            uploadZone.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            uploadZone.addEventListener(eventName, () => uploadZone.classList.add('dragover'), false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            uploadZone.addEventListener(eventName, () => uploadZone.classList.remove('dragover'), false);
        });

        uploadZone.addEventListener('drop', (e) => handleFiles(e.dataTransfer.files), false);

        function handleFiles(files) {
            if (files.length === 0) return;
            
            if (fileListContainer.querySelector('.table-responsive') === null) {
                 fileListContainer.innerHTML = `
                    <div class="table-responsive">
                         <table class="table table-custom mb-0">
                            <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>进度</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody id="fileListBody"></tbody>
                        </table>
                    </div>`;
            }
            
            const fileListBody = document.getElementById('fileListBody');

            [...files].forEach(file => {
                const row = document.createElement('tr');
                const progressId = `progress-${Math.random().toString(36).substr(2, 9)}`;
                row.innerHTML = `
                    <td><i class="bi bi-file-earmark-text me-2"></i>${file.name}</td>
                    <td>${formatFileSize(file.size)}</td>
                    <td>
                        <div class="progress" style="height: 8px;">
                            <div id="${progressId}" class="progress-bar" role="progressbar" style="width: 0%;"></div>
                        </div>
                    </td>
                    <td><span class="badge bg-warning-subtle text-warning-emphasis">等待上传</span></td>
                `;
                fileListBody.appendChild(row);
                simulateUpload(file, row, progressId);
            });
        }
        
        function simulateUpload(file, row, progressId) {
            const progressBar = document.getElementById(progressId);
            const statusBadge = row.querySelector('.badge');
            let progress = 0;

            statusBadge.className = 'badge bg-primary-subtle text-primary-emphasis';
            statusBadge.textContent = '上传中';

            const interval = setInterval(() => {
                progress += Math.random() * 20;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    statusBadge.className = 'badge bg-success-subtle text-success-emphasis';
                    statusBadge.textContent = '处理完成';
                }
                progressBar.style.width = progress + '%';
            }, 300);
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html> 